<template>
	<view class="bigBox">
		<u-navbar :autoBack="true" leftIconColor='#000' bgColor='transparent' rightIcon='share-square'
			@rightClick='share'>
		</u-navbar>
		<!-- <image src="" mode="aspectFit"></image> -->
		<view style='width: 750rpx;position: relative;height: 754rpx;overflow: hidden;'>
			<u-swiper circular :current='currentNum' imgMode='aspectFit' height='754rpx' bgColor='#fff' autoplay
				:list="list1" @change="e => currentNum = e.current" @click="click">
				<view slot="indicator" class="indicator-num">
					<text class="indicator-num__text">{{ currentNum + 1 }}/{{ list1.length }}</text>
				</view>
			</u-swiper>
		</view>
		<view class="shopData">
			<view class="shopData-title">JABUSHE 嘉碧茜抗皱眼霜修护淡化细 纹黑眼圈眼袋提拉紧致女正品</view>
			<view class="shopData-box">
				<view class="shopData-jg">
					￥399.00
					<view class="shopData-cx">
						限时促销
					</view>
				</view>
				<view class="xl">
					{{2000}}已付款
				</view>
			</view>
			<view class="dzBox">
				<view class="yh"><text v-if="true">399.00</text></view>
				<view class="dz">浙江</view>
			</view>
		</view>
		<view class="vipBox">
			<view class="specifications">
				<view class="box">
					<text class="title">规格</text>
					<text class="text">已选：
						<template v-for="(item,index) in chooseList">
							{{optionList[index].list[item].name+";"}}
						</template>
					</text>
				</view>
				<u-icon name='arrow-right'></u-icon>
			</view>
			<view class="specifications">
				<view class="box">
					<text class="title">VIP</text>
					<text class="text">升级<text class="vip">超级会员</text> 立减5元</text>
				</view>
				<u-icon name='arrow-right'></u-icon>
			</view>
			<view class="specifications">
				<view class="box">
					<text class="title">服务</text>
					<view class="fwBox">
						<template v-for="item in 6">
							<view class="fw">
								<u-icon name='checkmark-circle' color='#FF2525'></u-icon>
								<text class="fwText">正品保障</text>
							</view>
						</template>
					</view>
				</view>
				<u-icon name='arrow-right'></u-icon>
			</view>
		</view>
		<view class="evaluation">
			<view class="titleBox">
				<view class="letftTitle">
					商品评价（1184）
				</view>
				<view class="rightTitle">
					查看全部
					<u-icon name='arrow-right' color='#FF2525' size="24rpx"></u-icon>
				</view>
			</view>
		</view>
		<view class="store">
			<view class="storeData">
				<u-avatar shape="square" src="https://cdn.uviewui.com/uview/album/3.jpg" size="100rpx"></u-avatar>
				<view class="nameBox">
					<view class="name">汉尚华莲旗舰店</view>
					<view class="shopNumber">
						<text>商品：166</text>
						<text>粉丝：316万</text>
					</view>
				</view>
			</view>
			<view class="btn">
				<view :class="[focus?'gzBtn goBtn':'gzBtn']" @click="focusShop">{{focus?"取消关注":"关注店铺"}}</view>
				<view class="goBtn">进店逛逛</view>
			</view>
		</view>
		<view class="details">
			<view class="title">商品信息</view>
			<view class="photo">
				<!-- <jyf-parser :html="html"></jyf-parser> -->
				<p v-html="html"></p>
				<!-- <img v-for="(item,idx) in goodsData.post_content" :src="item" style="width: 100%;" alt=""> -->
			</view>
		</view>
		<u-popup :show="show" @close="close" closeable :closeOnClickOverlay="true" :round="10">
			<view class="ggBox">
				<view class="titleBox">
					<u-avatar src="https://cdn.uviewui.com/uview/album/4.jpg" text='暂无图片' size='160rpx' shape='square'></u-avatar>
					<view class="box">
						<view class="title">索尼（SONY）KDL-50W660F 50英寸全高清液晶电视（黑色）</view>
						<view class="kcAndjg">
							<view class="kc">剩余库存：<text class="text">120件</text></view>
							<view class="jg">¥1288.00</view>
						</view>
					</view>
				</view>
				<template v-for="(item,index) in optionList">
					<view class="optionsBox">
						<view class="optionsName">{{item.title}}</view>
						<view class="optionsList">
							<template v-for="(itemSon,indexSon) in item.list">
								<view :class="itemSon.show?'btn yes':'btn'" @click="choose(index,indexSon)">{{itemSon.name}}</view>
							</template>
						</view>
					</view>
				</template>
				<view class="numberBox">
					<text class="number">选择数量:</text>
					<u-number-box integer bgColor='#fff'></u-number-box>
				</view>
				<view class="sureBtn" @click="goSubOrder">确 认 选 择</view>
			</view>
		</u-popup>
		<view class="payBox">
			<view class="smallBox">
				<view class="box">
					<u-icon name='kefu-ermai' size='44rpx' color='#333333'></u-icon>
					<text>客服</text>
				</view>
				<view class="box" @click="goLike">
					<!-- heart-fill -->
					<u-icon :name='collection?"heart-fill":"heart"' size='44rpx'
						:color='collection?"#FF2525":"#333333"'></u-icon>
					<text>收藏</text>
				</view>
				<view class="box">
					<u-icon name='shopping-cart' size='44rpx' color='#333333'></u-icon>
					<text>购物车</text>
				</view>
			</view>
			<view class="bigBtn">
				<view class="btn">加入购物车</view>
				<view class="btn red" @click="openGg()">立即购买</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				optionList:[{
					title:'型号',
					list:[{
						name:'双人沙发',
						picey:'12',
						show:true
					},{
						name:'三人沙发',
						picey:'12',
						show:false
					},{
						name:'四人沙发',
						picey:'12',
						show:false
					},{
						name:'五人沙发',
						picey:'12',
						show:false
					}]
				},{
					title:'颜色',
					list:[{
						name:'红色',
						picey:'12',
						show:true
					},{
						name:'白色',
						picey:'12',
						show:false
					},{
						name:'绿色',
						picey:'12',
						show:false
					}]
				}],
				chooseList:[0,0],
				currentNum: 0,
				collection: true,
				focus: true,
				show: false,
				html: `<p><img src="http://api.zwhero.com/Upload/img/IMG_20220807_175035.jpg"><img src="http://api.zwhero.com/Upload/img/IMG_20220807_174915.jpg"><img src="http://api.zwhero.com/Upload/img/IMG_20220807_174852.jpg"><img src="http://api.zwhero.com/Upload/img/IMG_20220807_174829.jpg"><img src="http://api.zwhero.com/Upload/img/IMG_20220807_174800.jpg"><img src="http://api.zwhero.com/Upload/img/IMG_20220807_174743.jpg"><img src="http://api.zwhero.com/Upload/img/IMG_20220807_174716.jpg"><img src="http://api.zwhero.com/Upload/img/IMG_20220807_174658.jpg"><img src="http://api.zwhero.com/Upload/img/IMG_20220807_174938.jpg"><img src="http://api.zwhero.com/Upload/img/IMG_20220807_174613.jpg"><img src="http://api.zwhero.com/Upload/img/IMG_20220807_174541.jpg"><img src="http://api.zwhero.com/Upload/img/IMG_20220807_174524.jpg"></p>`
			}
		},
		methods: {
			choose(index,indexSon){
				this.optionList[index].list[this.chooseList[index]].show=false
				this.chooseList[index]=indexSon
				this.optionList[index].list[indexSon].show=true
				// console.log(index,indexSon)
			},
			change() {

			},
			click() {

			},
			share() {

			},
			goLike() {
				this.collection = !this.collection
			},
			focusShop() {
				this.focus = !this.focus
			},
			openGg() {
				this.show = true
			},
			close() {
				this.show = false
				// console.log('close');
			},
			goSubOrder(){
				uni.navigateTo({
					url:'/pages/shop/subOrder'
				})
			}
		}
	}
</script>

<style>
	.bigBox {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #EDF1F2;
		padding-bottom: 200rpx;
	}

	.u-swiper__indicator {
		position: absolute;
		right: 20rpx;
	}
</style>
<style lang="less">
	.ggBox{
		padding: 80rpx 40rpx;
		.titleBox{
			width: 690rpx;
			height: 160rpx;
			display: flex;
			.box{
				height: 160rpx;
				margin-left: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.title{
					font-weight: 700;
					color: rgba(0, 7, 15, 100);
					font-size: 24rpx;
				}
				.kcAndjg{
					display: flex;
					justify-content: space-between;
					.kc{
						padding:0 20rpx;
						height: 50rpx;
						line-height: 50rpx;
						background-color: rgba(248, 248, 248, 100);
						color: rgba(190, 199, 209, 100);
						font-size: 20rpx;
						.text{
							color: rgba(0, 7, 15, 100);
						}
					}
					.jg{
						font-weight: 700;
						color: rgba(255, 78, 95, 100);
						font-size: 36rpx;
					}
				}
			}
		}
		.numberBox{
			margin-top: 40rpx;
			width: 690rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.number{
				color: rgba(190, 199, 209, 100);
				font-size: 24rpx;
			}
		}
		.sureBtn{
			margin-top:40rpx;
			width: 670rpx;
			height: 100rpx;
			line-height: 100rpx;
			background-color: rgba(22, 132, 252, 100);
			color: rgba(255, 255, 255, 100);
			font-size: 24rpx;
			text-align: center;
			font-family: Arial;
			border: 1px solid rgba(33, 51, 255, 100);
		}
		.optionsBox{
			margin-top: 40rpx;
			width: 690rpx;
			.optionsName{
				color: rgba(190, 199, 209, 100);
				font-size: 24rpx;
			}
			.optionsList{
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-start;
				width: 690rpx;
				.btn{
					margin-top: 20rpx;
					margin-right: 20rpx;
					padding: 0 20rpx;
					height: 80rpx;
					line-height: 80rpx;
					background-color: rgba(248, 248, 248, 100);
					color: rgba(0, 0, 0, 1);
					font-size: 28rpx;
				}
				.no{
					background-color: rgba(248, 248, 248, 100);
					color: rgba(190, 199, 209, 100);
				}
				.yes{
					background-color: rgba(22, 132, 252, 100);
					color: rgba(255, 255, 255, 100);
				}
			}
		}
	}
	.details {
		width: 670rpx;
		margin-top: 34rpx;
		padding: 10rpx 20rpx;

		.title {
			width: 670rpx;
			text-align: center;
			font-weight: 700;
			color: rgba(16, 16, 16, 100);
			font-size: 36rpx;
		}

		.photo {
			width: 670rpx;
			padding: 10rpx;

			img {
				width: 670rpx;
			}

			rich-text {
				width: 670rpx;
			}
		}
	}

	.store {
		width: 670rpx;
		height: 220rpx;
		margin-top: 34rpx;
		padding: 10rpx 20rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;

		.storeData {
			display: flex;
			align-items: center;

			.nameBox {
				margin-left: 20rpx;

				.name {
					font-weight: 700;
					color: rgba(16, 16, 16, 100);
					font-size: 28rpx;
				}

				.shopNumber {
					color: rgba(146, 146, 146, 100);
					font-size: 20rpx;

					text {
						margin-right: 30rpx;
					}
				}
			}
		}

		.btn {
			display: flex;
			justify-content: space-around;

			.gzBtn,
			.goBtn {
				width: 160rpx;
				height: 50rpx;
				border-radius: 30px;
				line-height: 50rpx;
				text-align: center;
			}

			.gzBtn {
				background-color: rgba(255, 255, 255, 100);
				color: rgba(255, 37, 37, 100);
				border: 1px solid rgba(255, 37, 37, 100);
			}

			.goBtn {
				background-color: rgba(255, 37, 37, 100);
				color: #fff;
				border: 1px solid rgba(255, 37, 37, 100);
			}
		}
	}

	.evaluation {
		width: 670rpx;
		margin-top: 34rpx;
		padding: 10rpx 20rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;

		.titleBox {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.leftTitle {
				color: rgba(0, 0, 0, 1);
				font-size: 24rpx;
				font-weight: 700;
			}

			.rightTitle {
				display: flex;
				align-items: center;
				color: rgba(255, 37, 37, 100);
				font-size: 24rpx;
			}
		}
	}

	.vipBox {
		margin-top: 34rpx;
		padding: 10rpx 20rpx;
		width: 670rpx;
		height: 260rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;

		.specifications {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;

			.box {
				display: flex;

				.fwBox {
					width: 500rpx;
					display: flex;
					flex-wrap: wrap;

					.fw {
						margin-left: 40rpx;
						color: rgba(80, 85, 89, 78);
						font-size: 28rpx;
						display: flex;
						align-items: center;

						.fwText {
							margin-left: 4rpx;
							font-weight: 700;
							color: rgba(51, 51, 51, 100);
							font-size: 24rpx;
						}
					}
				}

				.title {
					display: inline-block;
					width: 100rpx;
					font-weight: 700;
					color: rgba(16, 16, 16, 100);
					font-size: 32rpx;
				}

				.text {
					margin-left: 40rpx;
					color: rgba(80, 85, 89, 78);
					font-size: 28rpx;

					.vip {
						color: #FF2525;
						font-weight: 700;
					}
				}
			}

		}
	}

	.payBox {
		position: fixed;
		bottom: 0;

		width: 750rpx;
		height: 100rpx;
		background-color: white;
		display: flex;
		padding-bottom: 60rpx;

		// border-top: 1px solid #666;
		.smallBox {
			width: 300rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.box {
				display: flex;
				flex-direction: column;
				align-items: center;
			}
		}

		.bigBtn {
			width: 450rpx;
			color: rgba(255, 255, 255, 100);
			font-size: 28rpx;
			display: flex;

			.btn {
				width: 225rpx;
				height: 100rpx;
				background-color: #ff8c8c;
				border-radius: 60rpx 0 0 60rpx;
				text-align: center;
				line-height: 100rpx;
			}

			.red {
				background-color: #FF2525;
				border-radius: 0 60rpx 60rpx 0;
			}
		}
	}
</style>
<style lang="scss">
	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}

	.shopData {
		width: 670rpx;
		background-color: #FFFFFF;
		border-radius: 0px 0px 20rpx 20rpx;
		padding: 10rpx 20rpx;

		&-title {
			color: rgba(0, 0, 0, 1);
			font-size: 36rpx;
			font-weight: 700;
		}

		&-box {
			margin-top: 20rpx;
			width: 670rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.xl {
				color: rgba(80, 85, 89, 88);
				font-size: 32rpx;
			}
		}

		&-jg {
			color: rgba(255, 37, 37, 100);
			font-size: 36rpx;
			display: flex;
			align-items: center;
		}

		&-cx {
			margin-left: 34rpx;
			width: 116rpx;
			height: 30rpx;
			line-height: 30rpx;
			border-radius: 10rpx;
			background-color: rgba(255, 255, 255, 100);
			color: rgba(255, 37, 37, 100);
			font-size: 24rpx;
			text-align: center;
			font-family: Arial;
			border: 1px solid rgba(255, 37, 37, 100);
		}

		.dzBox {
			width: 670rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.yh {
				text-decoration: line-through;
				color: rgba(153, 153, 153, 100);
				font-size: 28rpx;
			}

			.dz {
				color: rgba(80, 85, 89, 81);
				font-size: 28rpx;
			}
		}
	}
</style>
